<template>
	<view class="h-fill">
		<u-keyboard @confirm="confirmID" @cancel="cancelID" @change="keyboardChange" @backspace="keyboardBackClick" mode="card" v-model="keyboardVisible"></u-keyboard>
		<view v-if="!authInfo">
			<view style="padding-bottom: 160rpx;">
				<u-form :model="form" ref="uForm">
					<view class="l-pad t-pad r-pad">
						<text class="uni-bold">基本资料</text>
						<u-form-item label="姓名" labelWidth="auto" prop="name">
							<u-input v-model="form.name" />
						</u-form-item>
						<u-form-item label="性别" labelWidth="auto">
							<u-radio-group v-model="form.sex">
								<u-radio :name="0">男</u-radio>
								<u-radio :name="1">女</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="填写资料信息" labelWidth="auto" prop="idCardNo">
							<u-input v-model="form.idCardNo" disabled @click="keyboardVisible = true" placeholder="输入号码"/>
						</u-form-item>
					</view>
					<!-- <view class="gap t-mg"></view>
					<view class="pad">
						<text class="uni-bold">请上传身份证照片</text>
						<view class="uni-flex align-center">
							<view style="margin-right: 8rpx;">
								<u-icon name="error-circle-fill" color="#D61719" size="40"></u-icon>
							</view>
							<text class="uni-text-gray">身份证号码会加密处理，不会泄露你的信息</text>
						</view>
						<view class="h-box pad-t-xs pad-b-xs">
							<view class="flex-extend mg-r-sm">
								<view class="uni-flex uni-column align-center idcard pad">
									<uni-file-picker :image-styles="imageStyles" :del-icon="false" disable-preview :limit="1" v-model="frontImgs" @success="uploadSuccess1">
										<image class="idcard-img" mode="aspectFit" src="./static/img/img_zhengmian.png"></image>
									</uni-file-picker>
									<text>身份证人像面</text>
								</view>
								<u-form-item prop="idCardFrontImg" label=" " labelWidth="auto" :border-bottom="false">
								</u-form-item>
							</view>
							<view class="flex-extend">
								<view class="uni-flex uni-column align-center idcard pad">
									<uni-file-picker :image-styles="imageStyles" :del-icon="false" disable-preview :limit="1" v-model="backImgs" @success="uploadSuccess2">
										<image class="idcard-img" mode="aspectFit" src="./static/img/img_zhengmian.png"></image>
									</uni-file-picker>
									<text>身份证人像面</text>
								</view>
								
								<u-form-item prop="idCardBehindImg" label=" " labelWidth="auto" :border-bottom="false">
								</u-form-item>
							</view>
						</view>
						<text class="uni-bold">上传标准</text>
						<view class="t-mg">
							<u-row :gutter="20">
								<u-col :span="4">
									<view class="uni-flex uni-column align-center">
										<image class="h-fill" mode="widthFix" src="./static/img/img_zhengmian.png"></image>
										<view class="uni-flex align-center t-mg">
											<u-icon size="40" name="checkmark-circle-fill" color="rgb(139,194,76)"></u-icon>
											<text style="margin-left: 8rpx;">标准照片</text>
										</view>
									</view>
								</u-col>
								<u-col :span="4">
									<view class="uni-flex uni-column align-center">
										<image class="h-fill" mode="widthFix" src="./static/img/img_mohu@2x.png"></image>
										<view class="uni-flex align-center t-mg">
											<u-icon size="40" name="close-circle-fill" color="#D61719"></u-icon>
											<text style="margin-left: 8rpx;">模糊照片</text>
										</view>
									</view>
								</u-col>
								<u-col :span="4">
									<view class="uni-flex uni-column align-center">
										<image class="h-fill" mode="widthFix" src="./static/img/img_shanguang@2x.png"></image>
										<view class="uni-flex align-center t-mg">
											<u-icon size="40" name="close-circle-fill" color="#D61719"></u-icon>
											<text style="margin-left: 8rpx;">闪光照片</text>
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view> -->
					<view class="gap"></view>
					<view class="pad">
						<u-form-item label="上传资料" :labelStyle="{'font-weight': 'bold'}" labelWidth="auto" prop="extraImgs" label-position="top">
							<!-- <idcard-uploader v-model="form.headImg">
								<view class="head-img pad" v-if="form.headImg">
									<image class="h-fill v-fill" mode="aspectFit" :src="form.headImg"></image>
								</view>
								<view v-else class="add-btn">
									<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
								</view>
							</idcard-uploader> -->
							<view class="h-fill">
								<uni-file-picker v-model="form.extraImgs" :limit="3" @success="uploadSuccess">
									
								</uni-file-picker>
							</view> 
						</u-form-item>
					</view>
				</u-form>
			</view>
			<view class="bottom-fixed uni-flex uni-column align-center bottom-btn">
				<nice-red-button @click="submit" text="提交"></nice-red-button>
			</view>
		</view>
		<view class="result" v-else>
			<view v-if="authInfo.auth_status == 2">
				<image class="h-fill pad" src="./static/img/img_ok.png" mode="widthFix"></image>
				<view class="uni-center uni-bold pad m-b" style="color: #333333;">您已实名认证</view>
			</view>
			<view v-else-if="authInfo.auth_status == 1">
				<image class="h-fill pad" src="./static/img/img_pengding.png" mode="widthFix"></image>
				<view class="uni-center uni-bold pad m-b" style="color: #666666;">提交成功，将在1~2个工作日完成审核！</view>
			</view>
			<view v-else-if="authInfo.auth_status == 3">
				<image class="h-fill pad" :src="$getCloudStorageUrl('/img_wupiao@2x.png')" mode="widthFix"></image>
				<view class="uni-center uni-bold pad" style="color: #666666;">审核没通过</view>
				<!-- <view class="uni-center m-b" style="color: #999999;">原因：{{authAudit.msg || ""}}</view> -->
				<view class="uni-flex uni-column align-center">
					<nice-red-button @click="handleReauth" text="重新认证"></nice-red-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	const authUtil = uniCloud.importObject('authUtil')
	export default {
		data() {
			return {
				keyboardVisible: false,
				form: {
					name: '',
					sex: '0',
					idCardNo: "",
					idCardFrontImg: "",
					idCardBehindImg: "",
					headImg: "",
					extraImgs: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					idCardNo: [{
						required: true,
						message: '请输入号码',
						trigger: ['change', 'blur'],
					}, {
						len: 18,
						message: '身份证格式不正确',
						trigger: ['change', 'blur'],
					}],
					idCardFrontImg: [{
						required: true,
						message: '请上传身份证人脸面',
						trigger: ['change', 'blur'],
					}],
					idCardBehindImg: [{
						required: true,
						message: '请上传身份证国徽面',
						trigger: ['change', 'blur'],
					}],
					// headImg: [{
					// 	required: true,
					// 	message: '请上传资料',
					// 	trigger: ['change', 'blur'],
					// }],
					extraImgs: [{
						required: true,
						type: 'array',
						message: '请上传资料',
						trigger: ['change', 'blur'],
					}],
				},
				authAudit: null,
				edit: false,
				
				authInfo: null,
				
				imageStyles: {
					width: '300rpx',
					height: '200rpx',
					border: false
				},
				images: [],
				frontImgs: [],
				backImgs: []
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.loadData();
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			uploadSuccess(res) {
				console.log('uploadSuccess', res)
				// this.form.headImg = this.images[0].url
				// this.$refs.uForm.validate()
			},
			uploadSuccess1(res) {
				this.form.idCardFrontImg = this.frontImgs[0].url
				this.$refs.uForm.validate()
			},
			uploadSuccess2(res) {
				this.form.idCardBehindImg = this.backImgs[0].url
				this.$refs.uForm.validate()
			},
			confirmID() {
				this.$refs.uForm.validate()
			},
			cancelID() {
				this.$refs.uForm.validate()
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						this.$log('验证通过', this.form);
						try {
							this.authInfo = await authUtil.commitIDInfo({
								realname: this.form.name,
								identity: this.form.idCardNo,
								gender: parseInt(this.form.sex),
								latestHeadImg: this.form.headImg,
								idCardFront: this.form.idCardFrontImg,
								idCardBack: this.form.idCardBehindImg,
								extraImgs: this.form.extraImgs
							})
							this.$toast('提交成功，等待审核！')
						} catch (e) {
							this.$log("提交实名信息遇到错误", e);
						}
					} else {
						this.$log('验证失败');
					}
				});
			},
			async loadData() {
				this.authInfo = await authUtil.getMyAuthInfo()
				if (!this.authInfo) {
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules);
					})
				}
			},
			async handleReauth() {
				this.authInfo = null
				this.$nextTick(() => {
					this.$refs.uForm.setRules(this.rules);
				})
			},
			keyboardChange(val) {
				this.form.idCardNo = this.form.idCardNo.concat(val);
			},
			keyboardBackClick() {
				console.log('keyboardBackClick')
				if (this.form.idCardNo.length) {
					this.form.idCardNo = this.form.idCardNo.substring(0, this.form.idCardNo.length - 1);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.result {
		padding: 20% 10% 0 10%;
	}
	.m-b {
		margin-bottom: 100rpx;
	}
	.idcard {
		width: 100%;
		background-color: rgba(160,164,237,0.1);
		border-radius: 20rpx;
	}
	.idcard-img {
		width: 300rpx;
		height: 200rpx;
	}
	.bottom-btn {
		height: 160rpx;
		background-color: #FFFFFF;
		justify-content: center;
		z-index: 99;
	}
	.add-btn {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #EEEEEE;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.head-img {
		background-color: #F5F5F5;
		border-radius: 20rpx;
		height: 400rpx;
	}
</style>
